import React from 'react'

export default function List(props) {
  return (
    <>
      <input
        type="text"
        onKeyDown={(e) => {
          const value = e.target.value.trim()
          if (e.key !== 'Enter' || !value) return
          props.insert(value)
        }}
      />
      <ul>
        {props.list.map((item, index) => {
          return <li key={index}>{item}</li>
        })}
      </ul>
    </>
  )
}
